<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>家长</title>
    <script src="https://apis.google.com/js/platform.js"></script>
    <meta name="google-signin-client_id" content="209911798351-70dmqc250u7cdbk1as4qh5gj20k4ev99.apps.googleusercontent.com">
</head>
<style type="text/css" media="screen">
    ul li{
        list-style: none;
        margin-bottom: 10px;
    }
    h2 { text-align: center; }
    div#content {text-align: center;}
    img {width: 200px;height: auto;}
</style>
<body>
    <h2>简陋而不简单的页面</h2>
    <br>
    <div id="content">
        <h3>******Child******</h3>
        {% if children %}
        <div>
            {% for child in children %}
            <ul>
                <li><img src="{{ child.u_pic }}"> </li>
                <li><b>name: {{ child.u_name }}</b></li>
                <li><a href="{{ url_for('per.info_page', uid=child.u_id) }}">Inspect</a> </li>
            </ul>
            {% endfor %}
        </div>
        {% else %}
        <p>No child bound </p>
        {% endif %}

        <!--<h3>******Courses******</h3>-->
        <!--{% if courses %}-->
        <!--<div>-->
            <!--{% for course in courses %}-->
            <!--<ul>-->
                <!--<li>{{ course.c_name }}</li>-->
                <!--<li><img src="{{ course.c_pic }}"></li>-->
                <!--<li><a href="{{ url_for('cos.course_play', c_id=course.c_id) }}">Learn this</a></li>-->
            <!--</ul>-->
            <!--{% endfor %}-->
        <!--</div>-->
        <!--{%　else %}-->
        <!--<p>Nothing here, to <a href="{{ url_for('main.mall' )}}">Buy courses</a></p>-->
        <!--{% endif %}-->

        <h3>******Info******</h3>
        {% if user %}
        <div>
            <ul>
                <li><img src="{{ user.u_pic }}"></li>
                <li>email: {{ user.u_email }}</li>
                <li>nickname: {{ user.u_name }}</li>
                <li>birth: {{ user.u_birth }}</li>
                <li>introduce: <P>{{ user.u_intro }}</P></li>
            </ul>
        </div>
        {% else %}
        <p>User Info Not Found</p>
        {% endif %}
        <div>
            <div class="g-signin2" data-onsuccess="onSignIn"></div>
            <script type="text/javascript">
                function onSignIn(googleUser) {
      // var profile = googleUser.getBasicProfile();
      // console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
      // console.log('Name: ' + profile.getName());
      // console.log('Image URL: ' + profile.getImageUrl());
      // console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
      var id_token = googleUser.getAuthResponse().id_token;
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:5000/person/bind');
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
      };
      xhr.send('idtoken=' + id_token);
      xhr.onreadystatechange=function()
      {
         if (xhr.readyState==4 && xhr.status==200)
         {
             if(xhr.responseText)
                 { alert('ok');}
             else
                alert('login failed');
        }
    }
}
</script>
</div>

<h3>******Star******</h3>
{% if stars %}
<div>
    <ul>
        {% for star in stars %}
        <li><a href="{{ url_for('cos.post', pid=star.p_id) }}">{{ star.p_title }}</a></li>
        {% endfor %}
    </ul>
</div>
{% else %}
<p>No post starred</p>
{% endif %}
</div><!--content-->
</body>
</html>